<template>
    <div class="container">
        <my-search :fields="fieldsList" :baseNumber="8" @onSearch="searchForm" @onReset="resetForm" :selectIsAddAll="false">

        </my-search>

        <!-- <div class="searchMy">
            <el-form :inline="true" size="mini" class="searchMy-form" ref="form" :model="queryObj">
                <el-form-item label="企业名称">
                    <el-input v-model="queryObj.nsrmc" placeholder="" clearable></el-input>
                </el-form-item>
                <el-form-item label="企业类型">
                    <el-select v-model="queryObj.qylx_dm" placeholder="" clearable>
                        <el-option v-for="item in selectoption" :key="item.label" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-checkbox v-model="queryObj.sfssgs" @change="getTableData()">上市公司</el-checkbox>
                    <el-checkbox v-model="queryObj.jtxxk" @change="getTableData()">集团信息库</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" type="primary" @click="getTableData()">查询</el-button>
                    <el-button size="mini" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>

        </div> -->
        <div class="btn">
            <el-button type="info" plain size="mini" icon="el-icon-delete-solid" @click="deleteList()">删除</el-button>
            <el-button type="info" plain size="mini" @click="upload()">
                <svg-icon icon-class="upload" />
                名册导入</el-button>
            <el-button type="info" plain size="mini" @click="download()">
                <svg-icon icon-class="download" />
                模板下载</el-button>
        </div>
        <div class="table-list">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" 
            row-key="id" :showsummary="false" 
            :columns="tableColumns" :tableData="tableDatas" 
            :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" 
            :height="$store.state.app.windowHeight - 210" max-height="660px" 
            :current="false" @onCurrentChange="changepageNo" 
            @onPageSizeChange="changePageSize"   :totalPage="total" highlight-current-row :ifSelect="true" @onSelect="onSelectionChange" @onSelectAll="handleselectAll" />
        </div>
        <!-- 上传组件隐藏 -->
        <el-upload style="display:none;" ref="uploadTemplate" class="upload-demo" :before-upload="beforeUpload" action drag :show-file-list="false" :http-request="httpRequest" :multiple="false" accept=".xls,.csv,.xlsx">
            <el-button size="small" type="primary" ref="uploadTemplate_btn">点击上传</el-button>
        </el-upload>
    </div>
</template>

<script>

import { queryDetailList, batchDelete, downloadTemplate, uploadTemplate } from '@/api/cxtj/zdsygl'
import { hylx } from '@/api/common'
import { downloadFile } from "@/utils/utils"
export default {
    name: 'zdsygl-list',

    data() {
        return {
            loading: false,
            fieldsList: [
                {
                    label: '纳税人名称',
                    field: 'nsrmc',
                    type: 'text',
                    value: ''
                },
                {
                    label: '纳税人识别号',
                    field: 'nsrsbh',
                    type: 'text',
                    value: ''
                },
                {
                    label: '企业类型',
                    field: 'qylx_dm',
                    type: 'select',
                    value: '',
                    multiple: false,
                    options: [
                        {
                            value: '11',
                            label: '千户集团'
                        },
                        {
                            value: '2',
                            label: '省局列名'
                        },
                        {
                            value: '3',
                            label: '市局列名'
                        },
                    ]
                },
                {
                    label: '所属集团',
                    field: 'ssjt_mc',
                    type: 'text',
                    value: ''
                },
                {
                    label: '所属地区',
                    field: 'ssds',
                    type: 'text',
                    value: ''
                },
                {
                    label: '行业门类',
                    field: 'hyml_mc',
                    type: 'select',
                    value: '',
                    multiple: false,
                    options: [

                    ]
                },
                {
                    label: '行业大类',
                    field: 'hydl_mc',
                    type: 'select',
                    value: '',
                    multiple: false,
                    options: [

                    ]
                },
                {
                    label: '总部是否在冀',
                    field: 'zbsfzj',
                    type: 'select',
                    value: '',
                    multiple: false,
                    options: [
                        {
                            value: 'Y',
                            label: '是'
                        },
                        {
                            value: 'N',
                            label: '否'
                        }

                    ]
                },


            ],
            selectoption: [
                // {
                //     value: 1,
                //     label: '千户集团'
                // },
                // {
                //     value: 2,
                //     label: '列名企业'
                // },
                // {
                //     value: 12,
                //     label: '扩围企业'
                // },
                {
                    value: '11',
                    label: '千户集团'
                }, {
                    value: '2',
                    label: '省局列名'
                }, {
                    value: '3',
                    label: '市局列名'
                }
                // {
                //     value: 1,
                //     label: '省局列名'
                // },
                // {
                //     value: 2,
                //     label: '市局列名'
                // },
                // {
                //     value: 3,
                //     label: '其他类型'
                // }
            ],
            tableColumns: [
                {
                    label: '纳税人名称',
                    prop: 'NSRMC',
                    align: 'center',
                    width: 200
                },
                {
                    label: '纳税人识别号',
                    prop: 'NSRSBH',
                    align: 'center',
                    width: 200
                },
                {
                    label: '企业类型',
                    prop: 'QYLX_MC',
                    align: 'center',
                    minWidth: 80
                },
                {
                    label: '所属集团名称',
                    prop: 'SSJT_MC',
                    align: 'center',
                    width: 200
                },
                {
                    label: '所属集团纳税人识别号',
                    prop: 'SSJT_NSRSBH',
                    align: 'center',
                    width: 200
                },
                {
                    label: '主管税务机关名称',
                    prop: 'ZGSWJG_MC',
                    align: 'center',
                    width: 200
                },

                {
                    label: '所属地市',
                    prop: 'SSDS',
                    align: 'center',
                    minWidth: 80
                },
                {
                    label: '行业门类名称',
                    prop: 'HYML_MC',
                    align: 'center',
                    minWidth: 180
                },
                {
                    label: '行业大类名称',
                    prop: 'HYDL_MC',
                    align: 'center',
                    minWidth: 180
                },
                {
                    label: '总部是否在冀',
                    prop: 'ZBSFZJ',
                    align: 'center',
                    minWidth: 120,
                    render: (h, params) => {
                        if (params.row.ZBSFZJ == 'Y') {
                            return (
                                <span>是</span>
                            )
                        } else {
                            return (
                                <span>否</span>
                            )
                        }

                    }
                },
                // {
                //     label: '是否央企',
                //     prop: 'SFYQ',
                //     align: 'center',
                //     minWidth: 80,
                //     render: (h, params) => {
                //         if (params.row.SFYQ == 'Y') {
                //             return (
                //                 <span>是</span>
                //             )
                //         } else {
                //             return (
                //                 <span>否</span>
                //             )
                //         }

                //     }
                // },



                {
                    label: '操作',
                    prop: 'caozuo',
                    align: 'center',
                    width: 200,
                    fixed: 'right',
                    render: (h, params) => {
                        return (
                            <span>
                                <el-button type="text" onClick={() => this.go('detail', params.row)}>查看</el-button>
                                <el-button type="text" onClick={() => this.go('mcgl', params.row)}>编辑</el-button>

                            </span>
                        );
                    }
                }




            ],

            tableDatas: []
            , queryObj: {
                nsrmc: '', //公司名称
                nsrsbh: '',
                ssjt_mc: '',
                ssds: '',
                hyml_mc: '',
                hydl_mc: '',
                zbsfzj: '',
                qylx_dm: '',
                sfssgs: '',
                jtxxk: '',
                pageNo: 1,
                pageSize: 20
            },
            total: 0,
            selectedRows: []
        }
    },

    mounted() {
        this.gethylx()
        this.getTableData();
    },
    methods: {

        searchForm(params) {
            this.queryObj.nsrmc = params.nsrmc || ''
            this.queryObj.qylx_dm = params.qylx_dm || ''
            this.queryObj.nsrsbh = params.nsrsbh || ''
            this.queryObj.ssjt_mc = params.ssjt_mc || ''
            this.queryObj.ssds = params.ssds || ''
            this.queryObj.hyml_mc = params.hyml_mc || ''
            this.queryObj.hydl_mc = params.hydl_mc || ''
            this.queryObj.zbsfzj = params.zbsfzj || ''

            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.tableDatas = []
            this.total = 0

        },
        getTableData() {
            this.loading = true
            let params = {
                nsrmc: this.queryObj.nsrmc,
                nsrsbh: this.queryObj.nsrsbh,
                ssjt_mc: this.queryObj.ssjt_mc,
                ssds: this.queryObj.ssds,
                hyml_mc: this.queryObj.hyml_mc,
                hydl_mc: this.queryObj.hydl_mc,
                zbsfzj: this.queryObj.zbsfzj,
                qylx_dm: this.queryObj.qylx_dm,
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,

                // sfssgs: this.queryObj.sfssgs ? 'Y' : '',
                // jtxxk: this.queryObj.jtxxk ? 'Y' : '',
            }
            queryDetailList(params).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                }
            })
        },
        gethylx() {

            hylx({
                "tableName": "dm_gy_hy",
                "where": " mlbz = 'Y'",
                "orderBy": "hy_dm"
            }).then(res => {
                console.log(res)
                this.hyOption = res.data
                this.fieldsList[5].options = res.data.map(item => {
                    return { value: item.HYMC, label: item.HYMC }
                })
            })
            hylx({
                "tableName": "dm_gy_hy",
                "where": " dlbz = 'Y'",
                "orderBy": "hy_dm"
            }).then(res => {
                console.log(res)
                this.hyOption = res.data
                this.fieldsList[6].options = res.data.map(item => {
                    return { value: item.HYMC, label: item.HYMC }
                })
            })
        },
        deleteList() {
            if (this.selectedRows.length > 0) {
                this.loading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    let nsrsbhArr = []
                    this.selectedRows.forEach(item => {
                        nsrsbhArr.push(item.nsrsbh)
                    })
                    batchDelete(nsrsbhArr.join(',')).then(result => {
                        console.log(result)
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.getTableData();
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                })

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }


        },
        //下载模板
        download() {
            downloadTemplate().then(res => {
                downloadFile(res)
            })
        },

        //s上传名册
        upload() {
            this.$refs['uploadTemplate'].$refs['upload-inner'].handleClick()
        },
        beforeUpload(file, fileList) {
            // console.log('文件状态改变前',file);
            // if(!file.name.includes('.pdf')) {
            //     this.$message.error('请上传pdf格式文件')
            //     return false
            // }

            // if (file.size > 1024 * 1024 * 10) {
            //     this.$message.warning(
            //         "你上传的 \“" + file.name + "\” 文件过大，请上传小于2M的文件。"
            //     );
            //     return false;
            // }

            if (
                file.name.indexOf("@") != -1 ||
                file.name.indexOf("#") != -1 ||
                file.name.indexOf('""') != -1 ||
                file.name.indexOf("<") != -1 ||
                file.name.indexOf(">") != -1 ||
                file.name.indexOf("?") != -1 ||
                file.name.indexOf("|") != -1 ||
                file.name.indexOf("/") != -1 ||
                file.name.indexOf(":") != -1 ||
                file.name.indexOf("`\`") != -1
            ) {
                this.$message.warning(
                    "你上传的 \“" +
                    file.name +
                    "\” 文件有特殊字符，文件名中不可存在特殊字符,请重新上传"
                );
                return false;
            }

            let index = file.name.lastIndexOf(".");
            let Type = file.name.substr(index + 1, file.name.length);
            if (["xls", "csv", "xlsx"].indexOf(Type.toLowerCase()) === -1) {
                this.$message({
                    type: "warning",
                    message: "请上传后缀名为xls,csv,xlsx的附件！",
                });
                return false;
            }
        },
        httpRequest(data) {
            console.log(data);
            this.loading = true
            let fd = new FormData();
            fd.append("file", data.file);
            uploadTemplate(fd).then((res) => {
                this.loading = false
                if (res.code == 200) {

                    this.$message({
                        type: "success",
                        message: res.message,
                    });
                    this.getTableData()

                }
            });
        },

        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        handleselectAll(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        go(name, params) {
            this.$emit('changePage', name, params);
            // this.changePage(name, params)
            // this.$router.push({
            //     name: name,
            //     params: { id: params.id }

            // })
        },

    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    .searchMy {
        padding: 8px;
        .searchMy-form {
            height: 28px;
        }
    }

    .btn {
        padding: 8px 8px 8px 0;
    }
}
</style>
